<template>
  <div class="special">
    <h3>专题精选</h3>
    <van-swipe
      class="my-swipe"
      :loop="false"
      :width="300"
      :show-indicators="false"
    >
      <van-swipe-item
        v-for="i in topicListArr"
        :key="i.id"
        @click="gotoDetail(i)"
      >
        <img v-lazy="i.item_pic_url" alt="" />
        <p>{{ i.title }}</p>
        <p>{{ i.subtitle }}</p>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "Special",
  props: ["topicListArr"],
  data() {
    return {};
  },
  created() {
    // console.log(this);
  },
  methods: {
    gotoDetail(i) {
      this.$router.push({ path: "/xq", query: { id: i.id } });
    },
  },
};
</script>

<style lang='less' scoped>
.my-swipe .van-swipe-item {
  /* color: #fff; */
  font-size: 20px;
  line-height: 150px;
  /* text-align: center; */
  /* background-color: #39a9ed; */
}
.special {
  padding: 10px;
  box-sizing: border-box;
}
.special img {
  /* margin-right: 50px; */
  width: 96%;
  height: 200px;
}
.special p {
  line-height: 35px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.special h3 {
  text-align: center;
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 15px;
}
</style>